import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import "./style.css";

const tencentBtn = document.querySelector("#tengxun");

const gaodeBtn = document.querySelector("#gaode");

let map = null;

tencentBtn.addEventListener("click", () => {
  if (map) {
    // 解绑地图与 DOM 的关系
    map.setTarget(null);
  }
  const tencent = new TileLayer({
    source: new XYZ({
      url: "http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0",
      crossOrigin: "anonymous", // 解决跨域问题
    }),
  });

  map = new Map({
    target: "map", // 页面中用于渲染地图的容器 ID
    layers: [tencent],
    view: new View({
      center: [116.397128, 39.916527], // 设置中心点 (经纬度，需要转换为 Web Mercator)
      zoom: 1, // 设置缩放级别
      projection: "EPSG:3857", // Web Mercator 投影
    }),
  });
});

gaodeBtn.addEventListener("click", () => {
  if (map) {
    // 解绑地图与 DOM 的关系
    map.setTarget(null);
  }
  const gaodeLayer = new TileLayer({
    source: new XYZ({
      url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
      crossOrigin: "anonymous", // 解决跨域问题
    }),
  });

  map = new Map({
    target: "map", // 页面中用于渲染地图的容器 ID
    layers: [gaodeLayer],
    view: new View({
      center: [116.397128, 39.916527], // 设置中心点 (经纬度，需要转换为 Web Mercator)
      zoom: 1, // 设置缩放级别
      projection: "EPSG:3857", // Web Mercator 投影
    }),
  });
});
